<template>
  <div class="car">
    <h1>孙组件</h1>
    <h4>姓名：{{myName}}，年龄：{{myAge}}，场地:{{address}}</h4>
    <button @click="updateName">修改姓名</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="gotoPlane">将数据传递给组件2</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  inject: ['name', 'age', 'upname', 'upage'],
  data() {
    return {
      myName: this.name,
      myAge: this.age,
      address: '德国'
    }
  },
  methods: {
    updateName(e) {
      this.myName = '王五',
        this.upname(this.myName)
    },
    updateAge(e) {
      this.myAge = 24
      this.upage(this.myAge)
    },
    gotoPlane() {
        // console.log('11');
      // console.log(  this.$bus.$emit);
      this.$bus.$emit('getAddress',this.address)
    }
  }
}
</script>
<style scoped lang='scss'>
h1 {
  text-align: center;
}
.car{
  border: 1px solid blueviolet;
  margin-top: 20px;
}
button{
  margin: 0px 10px;
}
</style>